<template>
  <div class="container">
    <a-row>
      <a-col :span="24">
        <a-button @click="goBack" style="border-radius: 5px; margin-right: 10px"
          >返回</a-button
        >
        <span style="font-weight: 600; font-size: 16px">POI列表</span>
      </a-col>
    </a-row>
    <a-row style="margin-top: 20px">
      <a-col :span="24">
        <a-button
          @click="addHandle"
          type="primary"
          style="
            background: #2878ff;
            border: none;
            border-radius: 6px;
            margin-right: 10px;
          "
          ><plus-outlined />新增</a-button
        ></a-col
      >
    </a-row>
    <a-row style="margin-top: 20px">
      <a-col :span="24">
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :pagination="pagination"
          :loading="queryData.loading"
          :scroll="{ x: 1200 }"
          @change="handTabChange"
        >
          <template #bodyCell="{ column, record }">
            <!-- POI_ID -->
            <template v-if="column.key === 'poi_id'">
              <a-popover>
                <template #content>
                  <div
                    style="max-width: 100px; word-wrap: break-word"
                    v-if="record.poi_id?.trim().length > 15"
                  >
                    {{ record.poi_id }}
                  </div>
                </template>
                <div>
                  {{
                    record.poi_id?.trim().length > 15
                      ? record.poi_id.slice(0, 15) + "..."
                      : record.poi_id
                  }}
                </div>
              </a-popover>
            </template>
            <!-- 门店名称 -->
            <template v-if="column.key === 'store_name'">
              <a-popover>
                <template #content>
                  <div
                    style="max-width: 100px; word-wrap: break-word"
                    v-if="record.store_name?.trim().length > 15"
                  >
                    {{ record.store_name }}
                  </div>
                </template>
                <div>
                  {{
                    record.store_name?.trim().length > 15
                      ? record.store_name.slice(0, 15) + "..."
                      : record.store_name
                  }}
                </div>
              </a-popover>
            </template>
            <!-- 门店地址 -->
            <template v-if="column.key === 'store_address'">
              <a-popover>
                <template #content>
                  <div
                    style="max-width: 100px; word-wrap: break-word"
                    v-if="record.store_address?.trim().length > 15"
                  >
                    {{ record.store_address }}
                  </div>
                </template>
                <div>
                  {{
                    record.store_address?.trim().length > 15
                      ? record.store_address.slice(0, 15) + "..."
                      : record.store_address
                  }}
                </div>
              </a-popover>
            </template>
            <template v-if="column.key === 'poi_bind_library_count'">
              <a-button
                type="link"
                @click="viewHandle(record)"
                :disabled="record.poi_bind_library_count == 0"
                >查看({{ record.poi_bind_library_count }})</a-button
              >
            </template>
            <template v-if="column.key === 'action'">
              <div class="action">
                <a @click="editHandle(record)">编辑 </a>
                <a @click="deletHandle(record)">删除</a>
              </div>
            </template>
          </template>
        </a-table></a-col
      >
    </a-row>
  </div>
  <!-- 添加组件 -->
  <PoiListAddPol
    ref="poiListAddPol"
    @onSubmit="successPOI"
    :id="queryData.poiId"
  />
  <!-- 查看组件 -->
  <viewPoiDetail ref="poiDetail" />
</template>

<script setup>
import { PlusOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { ref, onMounted, reactive, computed, createVNode, nextTick } from "vue";
import PoiListAddPol from "./modules/PoiListAddPol.vue";
import viewPoiDetail from "./viewPoiDetail.vue";
import store from "@/store/index.js";
import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";

// 封装的请求
import request from "@/common/utils/request";
import { message, Modal } from "ant-design-vue";
const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id",
    align: "center",
  },
  {
    title: "POI_ID",
    dataIndex: "poi_id",
    key: "poi_id",
    align: "center",
  },
  {
    title: "门店名称",
    dataIndex: "store_name",
    key: "store_name",
    align: "center",
  },
  {
    title: "门店地址",
    key: "store_address",
    dataIndex: "store_address",
    align: "center",
  },
  {
    title: "获取方式",
    key: "poi_type_text",
    dataIndex: "poi_type_text",
    align: "center",
  },
  {
    title: "绑定项目",
    key: "poi_bind_library_count",
    dataIndex: "poi_bind_library_count",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    fixed: "right",
  },
];
const route = useRoute();
const router = useRouter();
const dataSource = ref([]); //列表
let queryData = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  loading: false,
  poiId: 0,
  detailId: null,
});
onMounted(() => {
  getPolList();
});
// 分页
const pagination = computed(() => ({
  total: queryData.value.total,
  current: queryData.value.page,
  pageSize: queryData.value.pageSize,
  showSizeChanger: false,
  size: "small",
  showTotal: (total) => `共${total}条`,
}));
const poiListAddPol = ref(null); //控制添加POL弹窗显示隐藏
// 获取Pol列表
const getPolList = () => {
  let params = {
    page: queryData.value.page,
    pageSize: queryData.value.pageSize,
  };
  queryData.value.loading = true;
  request
    .get("/work_ai", "/user/shotstack/associ_poi/list", params)
    .then((res) => {
      dataSource.value = res.result.data;
      queryData.value.total = res.result.total;
    })
    .finally(() => {
      queryData.value.loading = false;
    });
};
// 分页切换
const handTabChange = (pager) => {
  queryData.value.page = pager.current;
  queryData.value.pageSize = pager.pageSize;
  getPolList();
};
// 添加
const addHandle = () => {
  poiListAddPol.value.showModal();
};
// 编辑
const editHandle = (record) => {
  poiListAddPol.value.showModal(record);
};
// 删除
const deletHandle = (record) => {
  Modal.confirm({
    title: "确定删除吗?",
    icon: createVNode(ExclamationCircleOutlined),
    // content: "Some descriptions",
    okText: "确定",
    cancelText: "取消",
    onOk() {
      request
        .del("/work_ai", "/user/shotstack/poi/delete", { id: record.id })
        .then((res) => {
          if (res) {
            message.success("删除成功");
            getPolList();
          }
        })
        .finally(() => {
          // queryData.value.loading = false;
        });
    },
    onCancel() {
      console.log("Cancel");
    },
  });
  console.log(record);
};
// 添加成功回调
const successPOI = (data) => {
  getPolList();
};
// 查看
const poiDetail = ref(null);
const viewHandle = (record) => {
  if (record.poi_bind_library_count <= 0) {
    return message.warning("该POI未绑定项目");
  } else {
    poiDetail.value.showModal(record);
  }
};
const routerPath = computed(() => {
  return route.query;
});
const goBack = () => {
  if (routerPath.value && routerPath.value.titleKey) {
    router.push({
      name: "MaterialList",
      query: {
        titleKey: routerPath.value.titleKey,
      },
    });
  } else {
    router.back();
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 14px 14px 0;

  .action {
    display: flex;
    justify-content: center;

    a {
      color: var(--ss-primary-color);

      &:nth-child(1) {
        margin-right: 8px;
      }

      &:nth-child(1) {
        margin-left: 8px;
      }
    }
  }
}
</style>
